<template>
	<view class="p30">
		<textarea class="fs24" v-model="content" placeholder="说点什么吧" />
		<view class="h20 bg-f5"></view>
		<view class="flex col-center mt30 mb30">
			<text>上传视频：</text>
		</view>
		<u-line-progress  :percent="percent" :striped-active="true" active-color="#D23030"></u-line-progress>
		<view class="flex flex-wrap col-center">
			<view class="mt20 text-center relative radius10" style="overflow: hidden;" v-for="(item,index) in videoList" :key="index">
				<view class="bg-them color-f fs20 absolute top0 left0 w-max index99 pt20 pb20" @click="delVideo(index)">删除</view>
				<video style="height: 800rpx;" objectFit="cover" :src="item" controls></video>
			</view>
			<image class="mt20" style="width: 700rpx;" src="../../static/image/upload_icon.png" mode="widthFix" @click="upload('video')" v-show="videoList.length == 0"></image>
		</view>
		<view class="flex col-center mt30 mb30">
			<text>上传视频封面：</text>
		</view>
		<view class="flex flex-wrap col-center">
			<view class="mt20 text-center relative w210 radius10 mr20" style="overflow: hidden;" v-for="(item,index) in imgList" :key="index">
				<view class="bg-them color-f fs20 absolute top0 left0 w-max index99" @click="delImg(index)">删除</view>
				<image class="w210 h210" :src="item"></image>
			</view>
			<image class="w210 h210 mt20" src="../../static/image/upload_icon.png" v-show="imgList.length == 0" @click="upload('img')"></image>
		</view>
		<view class="mt30">
			<view 
			class="p20 bg-f radius20 flex col-center shadow-default" 
			:class="{'active': selectGoods.id == item.id}" 
			v-for="(item, index) in goodsList" 
			:key="index"
			@click="selectGoods = item">
				<image class="w100 h100 radius10 mr20" :src="item.img" mode=""></image>
				<view class="flex1 shenglue">
					<view class="text-nowrap">{{item.name}}</view>
					<view class="flex flex-row row-right col-end" style="color: #D23030;">
						<text>￥</text>
						<text class="fs40 fw700">{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center bg-them color-f radius20 p20 mt40" @click="commit">发布</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				content: '',
				imgId: '',
				categoryId: '',
				videoList: [],
				videoId: '',
				goodsList: [],
				selectGoods: {},
				//上传进度条
				percent:0
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取商品
			getData () {
				this.$api.videoShopGoods().then(res => {
					this.goodsList = res.data
				})
			},
			// 提交数据
			commit () {
				this.$u.throttle(this.report, 2000)
			},
			report() {
				if (this.videoId == '') {
					this.$tool.msg('请上传视频')
					return
				}
				if (this.imgId == '') {
					this.$tool.msg('请上传视频封面')
					return
				}
				if (this.content == '') {
					this.$tool.msg('请上输入视频标题')
					return
				}
				// if (JSON.stringify(this.selectGoods) == '{}') {
				// 	// this.$tool.msg('请选择关联商品')
				// 	return
				// }
				this.$api.releaseVideo({goods_id: this.selectGoods.id, image: this.imgId, name: this.content, video: this.videoId}).then(res => {
					this.$tool.msg(res.msg)
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/shortVideo/shortVideo'
						})
					}, 800)
				})
			},
			// 删除图片
			delImg (index) {
				this.imgList = []
				this.imgId = ''
			},
			delVideo () {
				this.videoList = []
				this.videoId = ''
				this.$set(this,'percent',0)
			},
			// 上传图片
			upload (type) {
				if (type == 'img') {
					this.$tool.upload().then(res => {
						console.log(res)
							this.imgList = []
							this.imgList.push(res.showImg)
							this.imgId = res.id
					})
				} else {
					uni.chooseVideo({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						compressed: false,
						success: res => {
							console.log(res)
							 const uploadTask = uni.uploadFile({
								url: this.$baseUrl +'/index.php/system/Basic/postUploadTwo', //仅为示例，非真实的接口地址
								filePath: res.tempFilePath,
								name: 'file',
								header: {
									Authorization: uni.getStorageSync('token')
								},
								formData: {
									video: 'abc'
								},
								success: r => {
									let imgData = JSON.parse(r.data)
									console.log('imgData',imgData)
									this.videoList = []
									this.videoList.push(imgData.path)
									this.videoId = imgData.id
								},
								
							});
							uploadTask.onProgressUpdate((res) => {
								// console.log('上传进度' + res.progress);
								this.percent=res.progress
								// console.log('已经上传的数据长度' + res.totalBytesSent);
								// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							});
						}
					})
					// this.$tool.uploadVideo(this.percent).then(res => {
					// 	console.log('111',res)
					// 	this.videoList = []
					// 	this.videoList.push(res.showImg)
					// 	this.videoId = res.id
					// })
				}
				
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
.active {
	box-shadow: 0px 0px 10rpx 0px rgba(210, 48, 48, 0.2);
	background: rgba(210, 48, 48, 0.2);
}
</style>
